<template>
  <div style="height: 140px;/* border: solid 1px red*/">
    <div style="background: rgba(33,10,16,0.13);height: 40px">
      <el-dropdown style="margin-top: 8px">
        <el-menu-item index="1" v-on:click="IndexLayout" style="margin-left: 200px">首页</el-menu-item>
<!--    <span style="margin-left: 150px;font-size: 17px;margin-top: 8px">-->
<!--      中国大陆-->
<!--      <i class="el-icon-arrow-down"></i>-->
<!--    </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item>全球</el-dropdown-item>-->
<!--          <el-dropdown-item divided>中国大陆</el-dropdown-item>-->
<!--          <el-dropdown-item>中国香港</el-dropdown-item>-->
<!--          <el-dropdown-item>中国台湾</el-dropdown-item>-->
<!--          <el-dropdown-item>中国澳门</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
      </el-dropdown>
      <span>&nbsp;&nbsp;</span>
      <el-link style="font-size: 17px" v-on:click="register">注册</el-link>
      <span>&nbsp;&nbsp;</span>
      <el-link style="font-size: 17px" v-on:click="login">登录</el-link>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link href="#" style="font-size: 17px">手机App</el-link>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link href="#" style="font-size: 17px">网页无障碍</el-link>

      <el-dropdown style="float: right;font-size: 17px;margin-right: 150px;margin-top: 8px">
    <span class="el-dropdown-link">
      联系客服
      <i class="el-icon-arrow-down"></i>
    </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>消费者客服</el-dropdown-item>
          <el-dropdown-item>卖家客服</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="float: right">&nbsp;&nbsp;&nbsp;</span>
      <el-dropdown style="float: right;font-size: 17px;margin-top: 8px">
  <span class="el-dropdown-link">
    卖家中心
    <i class="el-icon-arrow-down"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>开店入驻</el-dropdown-item>
          <el-dropdown-item>已卖出的宝贝</el-dropdown-item>
          <el-dropdown-item>出售中的宝贝</el-dropdown-item>
          <el-dropdown-item>卖家服务市场</el-dropdown-item>
          <el-dropdown-item>卖家培训中心</el-dropdown-item>
          <el-dropdown-item>体验中心</el-dropdown-item>
          <el-dropdown-item>电商培训中心</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link v-on:click="order" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-s-order">我的订单
      </el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link href="#" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-shopping-cart-2">购物车
      </el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <el-link href="#" style="float: right;font-size: 17px;margin-top: 11px" class="el-icon-star-on">收藏夹</el-link>
      <span style="float: right">&nbsp;&nbsp;</span>
      <span class="el-icon-s-custom" v-if="userName==null"
            style="float: right;font-size: 16px;margin-top: 11px;color: rgba(54,51,51,0.92)">欢迎，请先登录</span>
      <span v-else="">
      <el-dropdown style="float: right;font-size: 17px;margin-top: 8px">
      <span class="el-icon-s-custom">你好！{{userName}}</span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><el-link href="#" class="el-icon-user">个人中心</el-link></el-dropdown-item>
        <el-dropdown-item>
          <el-popconfirm
            confirm-button-text='是的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="您确认要注销吗？"
            v-on:confirm="logOut()"
          >
            <el-button slot="reference" type="text">注销</el-button>
          </el-popconfirm>
        </el-dropdown-item>
      </el-dropdown-menu>
      </el-dropdown>
        </span>

    </div>
    <div>
      <el-row style="margin-top: 15px">
        <el-col span="3">
          <img width="100px" height="30px" src="../../../assets/shop.png" style="margin-left: 50px ;margin-top: 15px">
        </el-col>
        <el-col span="2" style="margin-top: 20px"><span style="font-family: 华文彩云">鞋城e店</span></el-col>
        <el-col span="10">
          <el-row>
            <el-col span="3">
              宝贝描述
            </el-col>

            <el-col span="7">
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </el-col>

          </el-row>
          <el-row>
            <el-col span="3">
              卖家服务
            </el-col>

            <el-col span="7">
              <el-rate
                v-model="value1"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </el-col>


          </el-row>

          <el-row>
            <el-col span="3">
              物流服务
            </el-col>

            <el-col span="7">
              <el-rate
                v-model="value2"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </el-col>

          </el-row>
        </el-col>

        <!--el-col style="border: solid 1px red" span="10" offset="4" -->
        <form action="" class="parent" style="margin-top: 20px">
          <input type="text" style="border-color: black">
          <input type="button" style="color: white" value="搜索">
        </form>
        <i class="el-icon-star-on" style="margin-left: 20px">收藏店铺</i>
        <el-divider style="background: #ff8c00"><span style="color: #ff8c00">>欢迎来到时尚宝鞋</span></el-divider>
        <!--
        </el-col>-->
      </el-row>


    </div>
  </div>

</template>

<script>
  export default {
    name: "Head1",
    data() {
      return {
        value: 4.2,
        value1: 4.5,
        value2: 4.4,

        userName: window.sessionStorage.getItem("userName")

      }
    },
    methods: {
      register() {
        this.$router.push({path: "/UserRegister"});
      },
      IndexLayout(){
        this.$router.push({path:"/"})
      },
      login() {
        this.$router.push({path: "/UserLogin"});
      },

      logOut: function () {
        sessionStorage.clear()
        this.$router.push("/DetailsLayout");
        window.location.reload()
      },
      order() {
        var totalPrice = 0.0;
        totalPrice = this.num * this.price;
        let id = window.sessionStorage.getItem("id");
        if (id == null) {
          console.log(123);
          //未登录
          /*      window.sessionStorage.setItem("id", " ");*/
          this.$router.push({path: "/UserLogin"})
        } else {
          this.$router.push({path: "/order"})
        }
      }

    }

  }
</script>

<style scoped>
  .parent {
    width: 100%;
    height: 40px;

    position: relative;
  }

  .parent > input:first-of-type {
    /*输入框高度设置为40px, border占据2px，总高度为42px*/
    width: 350px;
    height: 25px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
  }

  .parent > input:first-of-type:focus {
    padding-left: 10px;
  }

  .parent > input:last-of-type {
    /*button按钮border并不占据外围大小，设置高度42px*/
    width: 90px;
    height: 30px;
    position: absolute;
    background: black;
    font-size: 16px;
    outline: none;
  }

  .router {
    text-decoration: none;
  }

</style>
